<template>
    <div>
        <!-- 模糊 -->
        <!-- <div class="full" 
        :style="{
            'background':`url(${currentMusic.al.picUrl})`,
            'background-size':'auto 100%',
            'filter':'blur(30px)',
            'background-origin':'center center'
        }"></div> -->
        <div  class="fullscreen">
            <h1><i class="fa fa-chevron-down" aria-hidden="true" @click="$emit('hidefull',false)"></i></h1>
            <img :src="currentMusic.picUrl" class="cover">
            <div class="content">
                <div class="lyric">
                    <ul :style="{transform: `translateY(-${lyricIndex*25}px)`}">
                        <li v-for="(ly,index) in lyricArray"
                            :key="index"
                            :class="{active: index==lyricIndex}" 
                        >{{ly.lyric}}</li>
                    </ul>
                </div>
                <div class="control" > 
                    <div class="contproc">
                        <span>{{currentTime | filPlayTime}}</span>
                        <input class="process" v-model="timeprocess" type="range" max="100" min="0" >
                        <span>{{duration | filPlayTime}}</span>
                    </div>
                    
                    <!-- 控制播放按钮 -->
                    <div class="processBtn">
                        <!-- 评论 -->
                        <i :class="['fa fa-heart', {'lightHeight':showlove}]" @click="showlove=!showlove"></i>
                        <i @click="$emit('changeMusic','prev')" class="fa fa-step-backward" aria-hidden="true"></i>
                        <i :class="['fa', playState == false ? 'fa-play':'fa-pause' ]"  @click="$emit('playpause')" aria-hidden="true"></i>
                        <i @click="$emit('changeMusic','next')" class="fa fa-step-forward" aria-hidden="true"></i>
                        <i class="fa fa-list" @click="histroy=!histroy"></i>
                    </div>
                </div>
                <!-- 歌曲加入播放歌单 ：每点一次就加入歌单
                    播放歌单:数组
                -->
                <transition
                    enter-active-class="animate__animated animate__fadeInUp"
                    leave-active-class="animate__animated animate__fadeOutDown"
                >
                    <div class="playList" v-show="!histroy">
                        <i @click="histroy=!histroy" class="fa fa-chevron-down" aria-hidden="true"></i>
                        <h2>播放历史({{playList.length}})</h2>
                        <ul>
                            <li v-for="pl in playList" 
                            :key="pl.id"
                            :class="{active:pl.id==currentMusic.id}"
                            @click="$emit('changeMusic',pl)"
                            >{{pl.name}}</li>
                        </ul>
                    </div>
                </transition>
                
            </div>
        </div>
    </div>
</template>
<script>
// import Comment from '@/components/Comment';

export default {
    props:{
        currentMusic:Object,
        currentTime:Number,  //当前播放时间
        duration:Number,  //总时长
        playState:Boolean,  //用于切换按钮样式
        playList:Array,  //歌单
    },
    data(){
        return {
            lyric:"",  //歌词
            histroy:true,
            showComment:false, //评论
            showlove:false,  //收藏
        }
    },
    methods:{},
    created(){
        this.axios.get(`/lyric?id=${this.currentMusic.id}`).then(result=>{
            this.lyric=result.lrc.lyric;
            // console.log(result);
        });
    },
    watch:{
        currentMusic(){
            this.axios.get(`/lyric?id=${this.currentMusic.id}`).then(result=>{
                this.lyric=result.lrc.lyric;
            });
        }
    },
    computed:{
        lyricArray(){
            if(this.lyric=="" || this.lyric.length<1) return []; //还没有歌词的时候
            let arr=this.lyric.split("\n");
                arr.pop();
                // console.log("arr==>",arr) //打印数组
            let reg=/\[(\d+):(\d+.\d+)\](.*)/;
            let lyricArr=arr.map(ly=>{
                if(reg.test(ly)){
                    return {
                        time:parseInt(RegExp.$1)*60+parseFloat(RegExp.$2),
                        lyric:RegExp.$3
                    }
                }else{
                    return {
                        time:0,
                        lyric:ly
                    }
                }
            });
            // console.log(lyricArr)
            return lyricArr;
        },
        lyricIndex(){
            if(this.lyricArray.length<1) return 0;
            // 针对没有时间字符串的歌词  没有时间就无法滚动  | My Moon这首
            if(this.lyricArray[this.lyricArray.length-1].time==0) return 0;
            for(let i in this.lyricArray){
                if(i>=this.lyricArray.length-2){
                    // console.log("=待修改===>");
                    return this.lyricArray.length-1;
                }else{
                    if(this.currentTime>this.lyricArray[i].time && this.lyricArray[parseInt(i)+1].time>this.currentTime){
                        return i;
                    }
                }
            }
            return 1;
        },
        timeprocess:{
            get(){
                let process=this.currentTime/this.duration*100;
                return process;
            },
            set(value){
                // console.log(value); //当前进度条的值0-100
                let ctime=value/100*this.duration;  //当前进度条时间
                this.$emit('changeTime',ctime);
            }
        }
    },
    // 过滤播放条时间
    filters:{
        filPlayTime:function(value){
            let minut=Number(value/60).toFixed(0)<10?"0"+Number(value/60).toFixed(0):Number(value/60).toFixed(0);
            let sec=Number(value%60).toFixed(0)<10?"0"+Number(value%60).toFixed(0):Number(value%60).toFixed(0);
            return minut+":"+sec;
        }
    },
    components:{
        // Comment
    }
    
}
</script>
<style lang="less" scoped>
@bg:rgba(0, 0, 0, 0.3);
@btnbg:rgba(255, 255, 255, 0.144);
div.fullscreen{
    position: relative;
    width: 100vw;
    height: 100vh;
    background: @bg;
    color: rgb(255, 250, 240);
    h1{
        position: fixed;
        z-index: 999;
        i.fa-chevron-down{
            display: inline-block;
            font-size: 25px;
            margin-left: 10px;
        }
    }
    // 图片
    .cover{
        display: block;
        width: 100vw;
        height: 100vh; //待布局
        min-height: 60vh;
        opacity: 1;
    }
}
// content 与 cover平级
div.content{
    width: 100vw;
    height: 100vh;
    position: relative;
    top: -100%;
    display: flex;
    flex-direction: column;
    background-color:@bg;

    // 歌词  //bug: 歌词居中ywt  高亮ywt
    .lyric{
        height: 60vh;
        width: 100%;
        color: rgb(240, 250, 237);
        text-align: center;
        line-height: 21px;
        overflow: hidden;
        position: relative;
        top: 10vh;
        ul{
            transition: transform 0.5s linear;
            width: 100%;
            display: flex;
            flex-direction:column;
            align-items: center;
            margin-top: 200px;  //歌词居中
            li{
                height: 25px;
                width: 100%;
                font-size: 16px;
                &.active{
                
                    height: 25px;
                    line-height: 25px;  //设置行高时需要与高度相等才能居中
                    font-size: 20px;
                    color: #33a3f5;
                    // color: #00ccff;
                    text-shadow: rgb(0, 0, 0) 1px 1px 1px;
                    white-space: nowrap;    
                } 
            }
        }
    }
    // 进度条部分
    .control{
        position: relative;
        top: 10vh;
        height: 30vh;
        background-color: @bg;
        .contproc{
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            .process{
                display: inline-block;
                width: 65%;
                height: 3px;
                margin: 40px 0;
            }
            // 进度条样式
            input[type=range]{
                -webkit-appearance:none; //清除系统默认样式
                // background: -webkit-linear-gradient(#74f10d,#61bd12) no-repeat, #e2e2e2;
                background: #feffff;
                /*设置左边颜色为#61bd12，右边颜色为#ddd*/
                // background-size: 75% 100%;/*设置左右宽度比例*/
                // height: 3px;
                border-radius: 5px;
                // 轨道内置阴影效果
                // box-shadow: 0 1px 1px #e6ebec,inset 0 2px 2px #7a7978;
            }
            // 拖动块样式
            input[type=range]::-webkit-slider-thumb {
                -webkit-appearance: none; //清除系统默认样式
                height: 20px;
                width: 20px;
                background: #33a3f5;
                border-radius: 50%;
                border: 1px solid rgb(144, 215, 248);
            }
        }
        
        // 按钮
        .processBtn{
            display: flex;
            justify-content: space-evenly;
            align-items: baseline;
            i.lightHeight{
                color: red;
            }
            i{
                display: inline-block;
                width: 40px;
                height: 40px;
                font-size: 25px;
                text-align: center;
                line-height: 40px;
                border-radius: 50%;
                color: rgb(243, 241, 241); 
                // &:nth-child(1){
                // }
                &:nth-child(2){
                    background-color: @btnbg;
                }
                &:nth-child(3){
                    width: 60px;
                    height: 60px;
                    font-size: 32px;
                    line-height: 60px;
                    background-color: @btnbg;
                }  
                &:nth-child(4){
                    background-color: @btnbg;
                }  
                // &:nth-child(5){
                // }  
            }
            // &::before{
            //     content: "";
            //     display: inline-block;
            //     width: 20px;
            //     height: 20px;
            //     background: transparent;
            // }
        }
    }
}
.playList{
    position: absolute;
    width: 100%;
    height: 25rem;
    bottom: 0px;
    background: #505050fd;
    border-radius: 10px 10px 0px 0px;
    padding-left: 10px;
    box-sizing: border-box;
    i{
        display: inline-block;
        font-size: 25px;
        height: 35px;
        color: rgb(248, 238, 255);
    }
    h2{
        font-size: 25px;
        height: 30px;
    }
    ul{
        li{
            height: 25px;
            line-height: 25px;
            border-bottom: 1px solid rgba(240, 236, 236, 0.089);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &.active{
                color: #33a3f5;
            }
        }
        
    }
}

// 模糊
// .{
//     position: fixed;
//     z-index: 9;
//     top: 0px;
//     left: 0px;
//     width: 100vw;
//     height: 100vh;
//     transition: scale(1.5);
//     background: #000000;
// }
</style>